<template>
	<div>
		<div>
			
			
			<div v-auth="['clock-in:check','clock-in:click','clock-in:limit']">
				<van-row>
					<van-col span="24">
						<van-icon name="sign" size="3rem" color="#55aaff" @click="onSignIn"/>
					</van-col>
					<!-- <van-col span="12">
						<van-icon name="cluster-o"  size="3rem" color="#aaaaff" @click="onTest"/>
					</van-col> -->
				</van-row>
				<van-row >
					<van-col span="24" @click="onSignIn">
						签到
					</van-col>
					<!-- <van-col span="12" @click="onTest">
						小组方案
					</van-col> -->
				</van-row>
			</div>
			<van-divider
				:style="{ color: '#f3f3f3', borderColor: '#555500', padding: '0 10px' }"
			>
			</van-divider>
			<van-cell-group :title="'成员' + memberListTotal +'人'" >
				<van-row>				
					<van-col span="20" offset="4" >
						<van-radio-group v-model="radio" direction="horizontal" icon-size="25px" @change="changeRadio">
							<van-radio name="1">按学号排序</van-radio>
							<van-radio name="2">按经验值排序</van-radio>
						</van-radio-group>
					</van-col>
				</van-row>
				
				<van-divider
					:style="{ color: '#f3aaf3', borderColor: '#555500', padding: '0 10px' }"
				>
				</van-divider>
				<van-row type="flex" justify="center"  v-for="(m,index) of memberList" :key="index">
					<van-col span="4">
						<van-image
							width="5rem"
							height="4.5rem"
							src="https://img01.yzcdn.cn/vant/cat.jpeg"
						/>
					</van-col>
					<van-col span="18" >
						<van-cell :value="m.experience"  size="large" :is-link="userInfo.roles[0]==='STUDENT'?(m.no == userInfo.no?true:false):true" center :label="m.no" @click="goDetailMember(m)">
							<!-- 使用 title 插槽来自定义标题 -->
							<template #title>
								<span class="custom-title"> {{m.name}} </span>
								
							</template>						
						</van-cell>
						
					</van-col>
				</van-row>
			</van-cell-group>
			
			
		</div>
		
	</div>
</template>

<script>
	import {Toast} from 'vant';
	// import {getLocation} from '@/api/gps.js';
	import {pageBankeMember} from '@/api/course.js';
	import { dict } from '@/api/dict.js';
	export default {
		name: 'bkMember',
		components: {
			
			
		},
		async created() {
			this.detailBankeInfo = JSON.parse(localStorage.getItem('detailBankeInfo'));
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
			this.memberList = [];
			while(this.memberListTotal > this.memberListCurrentPage*this.memberListPageSize) {				
				await pageBankeMember(this.memberListCurrentPage, this.memberListPageSize ,this.detailBankeInfo.id).then(res => {
					// console.log(res);
					if(res.data.code === 0) {
						this.memberListTotal = res.data.data.total;
						for(let r of res.data.data.records) {
							this.memberList.push(r);
						}						
						
					} else {
						Toast(res.data.msg);
						this.memberListTotal = 0;
					}
					
				})
				this.memberListCurrentPage++;
			}
			this.memberList.sort((a,b)=> 
				b.experience-a.experience
			);
			
		},
		computed: {
			
		},
		data() {
			return {
				radio: '2',
				memberListCurrentPage: 1,
				memberListPageSize: 10,
				memberListTotal: 20,
				memberList: [],
			}
		},
		methods: {
			changeRadio() {
				if(this.radio === '2') {
					console.log('按经验值排序')
					this.memberList.sort((a,b)=> 
						b.experience-a.experience
					)
				} else if(this.radio === '1') {
					console.log('按学号排序')
					this.memberList.sort((a,b)=> 
						a.no-b.no
					)
				}
			},
			onSignIn() {  //  签到，转跳到签到页
				
				this.$router.push({
					name: 'signIn',
				});
			},
			async goDetailMember(m) {
				if((this.userInfo.roles[0]==='STUDENT' && m.no == this.userInfo.no) || this.userInfo.roles[0]==='TEACHER') {
					await dict('sex').then(DictRes => {
						// console.log(DictRes);
						if(DictRes.data.code === 0) {
							for(let d of DictRes.data.data) {
								if(d.code == m.sex) {
									m.sex = d.info;		
									// console.log(m.sex);					
									break;
									
								}
							}
							localStorage.setItem('detailMember' , JSON.stringify(m));
						}
					}
					).catch(err => console.log(err))
					this.$router.push({
						name: 'detailMember',
						// params: {
						// 	detailMember: m
						// }
					});
				}
					
			}
			
		}
	}
</script>

<style>
.van-radio-group--horizontal {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	margin: 11px auto;
}
</style>
